<template>
    <div class="aComment">
        <router-link :to="`/themself/${userId}`">
            <van-image 
                width="1rem" 
                height="1rem" 
                radius="100%" 
                fit="cover" 
                :src="img"
            />
        </router-link>
        <div class="comentDetail">
            <div class="name">
                <p>{{nickname}}</p>
                <p v-if="landId === userId">楼主</p>
            </div>
            <div class="content">{{context}}</div>
            <div class="timeReply">
                <p>{{time}}</p>
                <router-link :to="{
                    path:`/comment-detail/${commentId}`,
                    query:{
                        landName:nickname,
                        landId:landId,
                        landTime:time,
                        landHead:img,
                        landContext:context,
                    }
                }"
                >   
                    <button class="deleteBtn" v-show="isMself" @click.prevent="delBtn(commentId)">删除</button>
                    <button>回复</button>
                </router-link>
            </div>
            <div class="comments" v-show="showSonComment">
                <div v-for="(comment,index) in sonComment" :key="index">
                    <router-link :to="`/themself/${comment.userId}`">{{comment.nickname}}</router-link>
                    <p>: {{comment.context}}</p>
                </div>
                <router-link :to="{
                    path:`/comment-detail/${commentId}`,
                    query:{
                        landName:nickname,
                        landId:landId,
                        landTime:time,
                        landHead:img,
                        landContext:context
                    }
                }">查看{{sonNumber}}条评论</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import jwtDecode from 'jwt-decode'
import { Toast } from 'vant';
export default {
    name:'AComment',
    props:['commentId','context','img','nickname','time','userId','landId','sonNumber','isMself','postId'],
    data() {
        return {
            sonComment:null,
            showSonComment:true,
            login:null,
            decode:null
        }
    },
    mounted(){
        if(sessionStorage.length === 0){
            this.login = false
        }else{
            let token=sessionStorage.getItem("token")
            this.decode = jwtDecode(token);
            this.login = true
        }
        if(this.login){
            //要看一下回复评论的评论
            axios({
                url:'/praise/findSonComment',
                method:'get',
                params:{
                    commentId:this.commentId,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{
                let res = data.data.data.slice(0,2)
                if(res.length === 0){
                    this.showSonComment = false
                }else{
                    this.sonComment = res
                }
            }).catch(err=>{
                console.log(err)
            })
        }else{
            Toast('登录即可查看评论')
        }
    },
    methods:{
        delBtn(commentId){
            const delParam = new URLSearchParams()
            delParam.append('commentId',commentId)
            delParam.append('userId',this.decode.userId)
            axios({
                url:'/praise/deleteComment',
                method:'delete',
                data:delParam,
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                }
            }).then(data=>{
                console.log(data)
                //如果删除成功就改变回复列表
                if(data.data.code === 20000){ 
                    Toast('删除评论成功')
                    //查看当前帖子下的所有评论
                    axios({
                        url:'/praise/findComment',
                        method:'get',
                        params:{
                            bodyId:this.postId,
                        },
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
                        }
                    }).then(data=>{
                        let res = data.data.data
                        // console.log(res)
                        //触发自定义事件
                        this.$emit('changeComments',res)
                    }).catch(err=>{
                        console.log(err)
                    })
                }
            }).catch(err=>{
                console.log(err)
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .aComment{
        display: flex;
        justify-content: space-between;
        padding: 0.3rem;
        border-bottom: solid 1px #f0f0f0;
        .comentDetail{
            margin-left: 0.2rem;
            flex: 1;
            .name{
                display: flex;
                p{
                    font-size: 0.3rem;
                    color: #666666;
                    &:nth-child(1){
                        margin-right: 0.1rem;
                    }
                    &:nth-child(2){
                        font-size: 0.25rem;
                        padding: 0 0.1rem;
                        background-color: var(--themeColor);
                        color: white;
                    }
                }
            }
            .content{
                padding: 0.25rem 0;
            }
            .timeReply{
                display: flex;
                justify-content: space-between;
                align-items: center;
                p{
                    color: #a1a1a1;
                }
                button{
                    background-color: #eeeeee;
                    color: #666666;
                    outline: none;
                    border: none;
                    padding: 0.1rem 0.2rem;
                }
            }
            .comments{
                background-color: #f5f5f5;
                border-radius: 0.1rem;
                padding: 0.2rem;
                margin-top: 0.2rem;
                div{
                    display: flex;
                    padding-bottom: 0.2rem;
                    a{
                        color: var(--themeColor);
                    }
                    p{
                        color: #8a8a8a;
                    }
                }
                a{
                    color: var(--themeColor);
                }
            }
        }
    }
    .deleteBtn{
        margin-right: 0.2rem;
    }
</style>